<template>
  <div class="user-choose">
    <Button @click="selectDriverss" :icon="icon">{{ text }}</Button>
    <span @click="clearSelectData" class="clear">清空已选</span>
    <Collapse simple class="collapse">
      <Panel name="1">
        已选择
        <span class="select-count">{{ selectUsers.length }}</span> 人
        <p slot="content">
          <Tag
            v-for="(item, i) in selectUsers"
            :key="i"
            :name="item.id"
            color="default"
            closable
            @on-close="handleCancelUser"
          >
            <Tooltip placement="top" :content="item.phone">
              <span @click="SelectDriver(item)">
                {{ item.name }} {{ item.vehicleNum }}</span
              >
            </Tooltip>
          </Tag>
        </p>
      </Panel>
    </Collapse>
    <Drawer
      title="选择实际承运人"
      closable
      v-model="userModalVisible"
      width="850"
      draggable
    >
      <Form
        ref="searchUserForm"
        :model="searchUserForm"
        inline
        :label-width="75"
      >
        <FormItem label="用户名称" prop="name">
          <Input
            type="text"
            v-model="searchUserForm.name"
            clearable
            placeholder="请输入用户名称"
            style="width: 180px"
          />
        </FormItem>
        <FormItem label="手机号码" prop="phone">
          <Input
            type="text"
            v-model="searchUserForm.phone"
            clearable
            placeholder="请输手机号码"
            style="width: 180px"
          />
        </FormItem>
        <FormItem style="margin-left: -35px" class="br">
          <Button @click="handleSearchUser" type="primary" icon="ios-search"
            >搜索</Button
          >
          <Button @click="handleResetUser">重置</Button>
        </FormItem>
      </Form>
      <Alert show-icon>
        已选择
        <span class="select-count">{{ selectUsers.length }}</span> 项
        <a style="margin-left: 10px" @click="clearSelectData">清空已选</a>
      </Alert>
      <Table
        :loading="userLoading"
        border
        @on-select="Selectedselect"
        :columns="companyColumns"
        :data="userData"
        style="margin: 2vh 0"
        ref="tableRef"
      >
        <!-- <template slot-scope="{ row, index }" slot="action">
          <div>
            <Button class="buttcss"  size="small" @click="chooseUser(row)">添加</Button>
          </div>
        </template> -->
      </Table>
      <Row type="flex" justify="end">
        <Page
          :current="searchUserForm.pageNumber"
          :total="totalUser"
          :page-size="searchUserForm.pageSize"
          @on-change="changeUserPage"
          @on-page-size-change="changeUserPageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
          transfer
        ></Page>
      </Row>
    </Drawer>
    <Modal
      class="Modal-driverS"
      v-model="numberDrivers"
      title="驾驶员"
      width="1300"
    >
      <Form
        ref="fromDrivers"
        :model="fromDrivers"
        inline
        :label-width="70"
        class="search-form"
      >
        <FormItem label="驾驶员姓名" prop="driverName">
          <Input
            type="text"
            v-model="fromDrivers.driverName"
            placeholder="请输入驾驶员姓名"
            clearable
            style="width: 150px"
          />
        </FormItem>
        <FormItem label="手机号码">
          <Input
            type="text"
            v-model="fromDrivers.driverPhone"
            placeholder="请输入手机号码"
            clearable
            style="width: 150px"
          />
        </FormItem>
        <FormItem label="驾驶车辆" prop="vehicleNum">
          <Input
            type="text"
            v-model="fromDrivers.vehicleNum"
            placeholder="请输入车牌号"
            clearable
            style="width: 150px"
          />
        </FormItem>
        <FormItem label="认证状态">
          <Select v-model="fromDrivers.driverUserStatus" style="width: 150px">
            <Option value="">全部</Option>
            <Option value="0">未认证</Option>
            <Option value="1">已认证</Option>
            <Option value="2">待审核</Option>
            <Option value="3">已过期</Option>
          </Select>
        </FormItem>

        <span style="margin-left: 20px" class="br">
          <Button
            @click="getPcJoinDriverVoList"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
          <Button @click="driversHandleReset">重置</Button>
        </span>
      </Form>
      <Row>
        <Table
          :loading="loading1"
          border
          :columns="columnDrivers"
          :data="getPcJoinDriverVoData"
          ref="table"
          sortable="custom"
        >
        </Table>
      </Row>
      <div style="width: 100%; height: 20px"></div>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="fromDrivers.pageNumber"
          :total="fromDrivers.total"
          :page-size="fromDrivers.pageSize"
          @on-change="changePageDrivers"
          @on-page-size-change="changePageSizeDrivers"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
      <div slot="footer"></div>
    </Modal>
    <!--  -->
    <Modal
      class="Modal-driverS"
      v-model="numberVehicles"
      title="车辆"
      width="1300"
    >
      <Form
        ref="fromVehicles"
        :model="fromVehicles"
        inline
        :label-width="70"
        class="search-form"
      >
        <FormItem label="车牌号" prop="vehicleNum">
          <Input
            type="text"
            v-model="fromVehicles.vehicleNum"
            placeholder="请输入车牌号"
            clearable
            style="width: 160px"
          />
        </FormItem>
        <FormItem label="驾驶驾驶员">
          <Input
            type="text"
            v-model="fromVehicles.driverName"
            placeholder="请输入驾驶驾驶员"
            clearable
            style="width: 160px"
          />
        </FormItem>
        <FormItem label="作业状态">
          <Select
            clearable
            v-model="fromVehicles.taskState"
            style="width: 160px"
          >
            <Option value="">全部</Option>
            <Option value="1">满载</Option>
            <Option value="0">空闲</Option>
          </Select>
        </FormItem>
        <FormItem label="认证状态">
          <Select v-model="fromVehicles.registStatus" style="width: 160px">
            <Option value="">全部</Option>
            <Option value="0">未认证</Option>
            <Option value="1">已认证</Option>
            <Option value="2">待审核</Option>
            <Option value="3">已过期</Option>
              <Option value="4">已注销</Option>
          </Select>
        </FormItem>
        <span style="margin-left: 35px" class="br">
          <Button @click="getPcTransportData" type="primary" icon="ios-search"
            >搜索</Button
          >
          <Button @click="vehicleHandleReset">重置</Button>
        </span>
      </Form>
      <Row>
        <Table
          :loading="loading1"
          border
          :columns="columnVehicles"
          :data="getPcTransportVehicleListData"
          ref="table"
          sortable="custom"
        >
        </Table>
      </Row>
      <div style="width: 100%; height: 20px"></div>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="fromVehicles.pageNumber"
          :total="fromVehicles.total"
          :page-size="fromVehicles.pageSize"
          @on-change="changeSortVehicles"
          @on-page-size-change="changeSelectVehicles"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
      <div slot="footer"></div>
    </Modal>
    <!-- 驾驶员详情   -->
    <DriverDetails
      @DriverDetaEnd="DriverDetaEnd"
      :BidderdUserId="BidderdUserId"
      :driverModalue="this.driverModalue"
    >
    </DriverDetails>
    <!-- 车辆详情 -->
    <VehicleDetails
      @VehicleDetailsEnd="VehicleDetailsEnd"
      :VehicleDetailsId="VehicleDetailsId"
      :VehicleDetailsModalue="this.VehicleDetailsModalue"
    >
    </VehicleDetails>
  </div>
</template>

<script>
import VehicleDetails from "@/views/componentsonn_source_goods/VehicleDetails";
import DriverDetails from "@/views/componentsonn_source_goods/DriverDetails";
import { getUserListData, getdriverPage } from "@/api/index";
import departmentChoose from "./department-choose";
import { getPcJoinDriverVo, getPcTransportVehicleList } from "@/api/user";
import { it } from "date-fns/locale";
export default {
  name: "userChoose",
  components: {
    departmentChoose,
    DriverDetails,
    VehicleDetails,
  },
  props: {
    text: {
      type: String,
      default: "选择驾驶员",
    },
    icon: {
      type: String,
      default: "md-person-add",
    },
    getDriverID: {
      type: String,
      default: "",
    },
    driverNum: {
      type: String,
      default: "",
    },
    emptyDriverNum: {
      type: Boolean,
      default: false,
    },
  },

  watch: {
    emptyDriverNum(val) {
      if (val) {
        this.clearSelectData();
      }
    },
  },
  data() {
    return {
      currentChoose: "",
      getPcJoinDriverVoData: [],
      loading1: false,
      vehiclUserId: "",
      driverUserId: "",
      numberDrivers: false,
      numberVehicles: false,
      getPcTransportVehicleListData: [],
      fromDrivers: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        total: 0,
        registStatus: "",
        vehicleNum: "",
        driverName: "",
        taskState: "",
      },
      vehicleLength: [],
      vehicleType: [],
      fromVehicles: {
        registStatus: "",
        vehicleType: "",
        vehicleLength: "",
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        total: 0,
        taskState: "",
      },

      billMnagement: "",

      VehicleDetailsModalue: false, //车辆弹框
      VehicleDetailsId: "", //车辆id
      driverModalue: false, //驾驶员详情控制以页面
      BidderdUserId: "", //驾驶员Id
      userLoading: true,
      userModalVisible: false,
      selectUsers: [],
      SelectList: [],
      searchUserForm: {
        phone: "",
        name: "",

        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "", // 默认排序字段
        order: "", // 默认排序方式
        grabOrdersType: "2",
      },
      columnsDriver: [],

      companyColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
          _checked: false,
        },
        {
          title: "选择",
          key: "id",
          width: 70,
          align: "center",
          render: (h, params) => {
            let id = params.row._index;
            let flag = false;
            if (this.currentChoose === id && params.row.flag) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag,
                },
                on: {
                  "on-change": () => {
                    self.currentChoose = id;
                    self.chooseUser(params.row);
                    this.getUserDataList();
                  },
                },
              }),
            ]);
          },
        },
        {
          title: "已派单数",
          key: "waitingList",
          minWidth: 100,
          render: (h, params) => {
            {
              return h("div", params.row.waitingList);
            }
          },
        },
        {
          title: "用户名称",
          key: "name",
          minWidth: 110,
          sortable: false,
          tooltip: true,
        },
        {
          title: "联系电话",
          key: "phone",
          minWidth: 140,
          sortable: false,
        },
        {
          title: "认证类型",
          key: "carrierType",
          minWidth: 100,
          sortable: false,
          render: (h, params) => {
            let text = "";
            if (params.row.carrierType == 1) {
              text = "车主";
            } else if (params.row.carrierType == 2) {
              text = "个体户";
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未知"
              );
            }
            return h("div", text);
          },
        },
        {
          title: "驾驶员数",
          key: "driverNum",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
            let num = "";
            if (params.row.driverNum) {
              num = params.row.driverNum;
            } else {
              num = "0";
            }
            return h("div", [
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.numberDrivers = true;
                      this.driverUserId = params.row.carOwnerId;
                      this.getPcJoinDriverVoList(params.row);
                    },
                  },
                },
                num
              ),
            ]);
          },
        },
        {
          title: "车辆数",
          key: "vehicleNumber",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
            let num = "";
            if (params.row.vehicleNumber) {
              num = params.row.vehicleNumber;
            } else {
              num = "0";
            }
            return h("div", [
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.numberVehicles = true;
                      this.vehiclUserId = params.row.carOwnerId;
                      this.getPcTransportData(params.row);
                    },
                  },
                },
                num
              ),
            ]);
          },
        },
      ],
      driverolumns: [
        {
          type: "index",
          width: 60,
          align: "center",
          _checked: false,
        },
        {
          title: "已派单数",
          key: "waitingList",
          minWidth: 80,
          render: (h, params) => {
            {
              return h("div", params.row.waitingList);
            }
          },
        },
        {
          title: "驾驶员名称",
          key: "name",
          minWidth: 100,
          render: (h, params) => {
            {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.BidderdDiver(params.row);
                      },
                    },
                  },
                  params.row.name
                ),
              ]);
            }
          },
        },
        {
          title: "认证类型",
          key: "customerType",
          minWidth: 100,
          sortable: false,
          render: (h, params) => {
            let text = "";
            if (params.row.customerType == 1) {
              text = "车主";
            } else if (params.row.customerType == 2) {
              text = "个体户";
            } else if (params.row.customerType == 3) {
              text = "驾驶员";
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未知"
              );
            }
            return h("div", text);
          },
        },
        {
          title: "手机号码",
          key: "phone",
          minWidth: 130,
          sortable: false,
        },

        {
          title: "车辆",
          key: "vehicleNum",
          minWidth: 100,
          render: (h, params) => {
            {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.LookVehicleInfo(params.row);
                      },
                    },
                  },
                  params.row.vehicleNum
                ),
              ]);
            }
          },
        },
        {
          title: "操作",
          key: "action",
          minWidth: 70,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.chooseUser(params.row);
                    },
                  },
                },
                "添加"
              ),
            ]);
          },
        },
      ],

      columnDrivers: [
        {
          title: "#",
          type: "index",
          minWidth: 60,
        },
        {
          title: "认证状态",
          key: "driverUserStatus",
          minWidth: 100,
          align: "center",
          render: (h, params) => {
            let colorStatus = "";
            let titleText = "";
            if (params.row.driverUserStatus == 0) {
              colorStatus = "error";
              titleText = "未认证";
            } else if (params.row.driverUserStatus == 1) {
              colorStatus = "success";
              titleText = "已认证";
            } else if (params.row.driverUserStatus == 2) {
              colorStatus = "processing";
              titleText = "待审核";
            } else if (params.row.driverUserStatus == 3) {
              colorStatus = "error";
              titleText = "已过期";
            }
            return h("div", [
              h("Badge", {
                props: {
                  status: colorStatus,
                  text: titleText,
                },
              }),
            ]);
          },
        },
        {
          title: "驾驶员姓名",
          key: "driverName",
          minWidth: 110,
          render: (h, params) => {
            let driverUserName = params.row.driverName;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: {
                  transfer: true,
                  placement: placTop,
                  maxWidth: "110",
                  content: driverUserName,
                },
              },
              [
                h(
                  "a",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },

                    on: {
                      click: () => {
                        this.BidderdDiver(params.row);
                      },
                    },
                  },
                  driverUserName
                ),
              ]
            );
          },
        },
        {
          title: "手机号码",
          key: "driverPhone",
          minWidth: 160,
          sortable: false,
        },
        {
          title: "已接单数",
          key: "receivedOrder",
          minWidth: 150,
          sortable: false,
          render: (h, params) => {
            if (params.row.receivedOrder) {
              return h("div", params.row.receivedOrder + " 单");
            } else {
              return h("div", 0 + " 单");
            }
          },
        },
        {
          title: "好评率",
          key: "goodRate",
          minWidth: 150,
          sortable: false,
          render: (h, params) => {
            if (params.row.goodRate) {
              return h("div", params.row.goodRate + " %");
            } else {
              return h("div", 0 + " %");
            }
          },
        },
        {
          title: "准驾车型",
          key: "driverType",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "驾驶车辆",
          key: "vehicleNum",
          minWidth: 120,
          render: (h, params) => {
            if (params.row.vehicleNum == "" || params.row.vehicleNum == null) {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未绑定"
              );
            } else {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.LookVehicleInfo(params.row);
                      },
                    },
                  },
                  params.row.vehicleNum
                ),
              ]);
            }
          },
        },
      ],
      columnVehicles: [
        {
          title: "#",
          type: "index",
          minWidth: 60,
        },
        {
          title: "认证状态",
          key: "registStatus",
          minWidth: 100,
          align: "center",
          render: (h, params) => {
            let colorStatus = "";
            let titleText = "";
            if (params.row.registStatus == 0) {
              colorStatus = "error";
              titleText = "未认证";
            } else if (params.row.registStatus == 1) {
              colorStatus = "success";
              titleText = "已认证";
            } else if (params.row.registStatus == 2) {
              colorStatus = "processing";
              titleText = "待审核";
            } else if (params.row.registStatus == 3) {
              colorStatus = "error";
              titleText = "已过期";
            }
            else if (params.row.registStatus == 4) {
              colorStatus = "error";
              titleText = "已注销";
            }
            return h("div", [
              h("Badge", {
                props: {
                  status: colorStatus,
                  text: titleText,
                },
              }),
            ]);
          },
        },
        {
          title: "驾驶车辆",
          key: "vehicleNum",
          minWidth: 120,
          render: (h, params) => {
            if (params.row.vehicleNum == "" || params.row.vehicleNum == null) {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未绑定"
              );
            } else {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.LookVehicleInfo(params.row);
                      },
                    },
                  },
                  params.row.vehicleNum
                ),
              ]);
            }
          },
        },

        {
          title: "车牌颜色",
          key: "colorType",
          minWidth: 120,
          render: (h, params) => {
            if (params.row.colorType) {
              let text = this.$options.filters["VEHICLE_COLOR"](
                params.row.colorType
              );
              return h("div", text);
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未选择"
              );
            }
          },
        },
        {
          title: "能源类型",
          key: "oilType",
          minWidth: 140,
          sortable: false,
          render: (h, params) => {
            if (params.row.oilType) {
              let text = this.$options.filters["OILTYPE"](params.row.oilType);
              return h("div", text);
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未选择"
              );
            }
          },
        },
        {
          title: "车辆类型",
          key: "vehicleCodeType",
          minWidth: 200,
          sortable: false,
          render: (h, params) => {
            if (params.row.vehicleCodeType) {
              let text = this.$options.filters["VEHICLENEWTYPE"](
                params.row.vehicleCodeType
              );
              return h("div", text);
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未选择"
              );
            }
          },
        },
        {
          title: "核定载质量",
          key: "approvedLoad",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
            return h("div", params.row.approvedLoad + " 吨");
          },
        },

        {
          title: "驾驶驾驶员",
          key: "driverName",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
            if (params.row.driverName) {
              return h("div", [
                h(
                  "a",
                  {
                    on: {
                      click: () => {
                        this.BidderdDiver(params.row);
                      },
                    },
                  },
                  params.row.driverName
                ),
              ]);
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未绑定"
              );
            }
          },
        },
        // 作业状态
        {
          title: "作业状态",
          key: "taskState",
          minWidth: 100,
          sortable: false,
          render: (h, params) => {
            if (params.row.taskState == "0") {
              return h("span", "空闲");
            } else if (params.row.taskState == "1") {
              return h("span", "满载");
            } else {
              return h("span", "未知");
            }
          },
        },
      ],
      userData: [],
      totalUser: 0,
      selectData: [], //页面传值
    };
  },
  methods: {
    // 车辆切换页码
    changeSortVehicles(v) {
      this.fromVehicles.pageNumber = v;
      this.getPcTransportData();
    },
    // 车辆切换页码
    changeSelectVehicles(v) {
      this.fromVehicles.pageSize = v;
      this.getPcTransportData();
    },
    // 驾驶员切换页码
    changePageDrivers(v) {
      this.fromDrivers.pageNumber = v;
      this.getPcJoinDriverVoList();
    },
    // 驾驶员切换页码
    changePageSizeDrivers(v) {
      this.fromDrivers.pageSize = v;
      this.getPcJoinDriverVoList();
    },
    // 获取驾驶员列表
    getPcJoinDriverVoList() {
      this.loading1 = true;
      this.fromDrivers.userId = this.driverUserId;
      for (let item in this.fromDrivers) {
        if (!this.fromDrivers[item]) {
          delete this.fromDrivers[item];
        }
      }
      getPcJoinDriverVo(this.fromDrivers).then((res) => {
        this.loading1 = false;
        if (res.result.records.length > 0) {
          this.getPcJoinDriverVoData = res.result.records;
          this.fromDrivers.total = res.result.total;
        } else {
          this.getPcJoinDriverVoData = [];
        }
      });
    },
    // 车辆列表重置
    driversHandleReset() {
      this.fromDrivers.pageNumber = 1;
      this.fromDrivers.pageSize = 10;
      this.fromDrivers.driverName = "";
      this.fromDrivers.driverPhone = "";
      this.fromDrivers.vehicleNum = "";
      this.fromDrivers.driverUserStatus = "";
      this.getPcJoinDriverVoList();
    },
    // 获取车辆列表
    getPcTransportData() {
      this.fromVehicles.userId = this.vehiclUserId;
      this.loading1 = true;
      for (let item in this.fromVehicles) {
        if (!this.fromVehicles[item]) {
          delete this.fromVehicles[item];
        }
      }
      getPcTransportVehicleList(this.fromVehicles).then((res) => {
        this.loading1 = false;
        if (res.result.records.length > 0) {
          this.getPcTransportVehicleListData = res.result.records;
          this.fromVehicles.total = res.result.total;
        } else {
          this.getPcTransportVehicleListData = [];
        }
      });
    },
    // 车辆列表重置
    vehicleHandleReset() {
      this.fromVehicles.pageNumber = 1;
      this.fromVehicles.pageSize = 10;
      this.fromVehicles.vehicleNum = "";
      this.fromVehicles.driverName = "";
      this.fromVehicles.registStatus = "";
      this.fromVehicles.taskState = "";
      this.getPcTransportData();
    },
    driverCompanyTabs(val) {
      if (val == "driverName") {
        this.searchUserForm.grabOrdersType = "2";
      } else {
        this.searchUserForm.grabOrdersType = "1";
      }
      this.getUserDataList();
    },

    selectDriverss() {
      this.userModalVisible = true;
      if (this.getDriverID != "") {
      } else {
        // this.userColumns = this.columnsDriver;
        // this.userColumns = this.userColumns.filter(
        //   (col) => col.key !== "waitingList"
        // );
      }
    },
    handleSelectDep(v) {
      this.searchUserForm.departmentId = v;
    },
    changeUserPage(v) {
      // 多少条
      this.searchUserForm.pageNumber = v;
      this.getUserDataList();
    },
    switchss() {
      if (this.selectUsers.length > 0) {
        this.userData.forEach((item) => {
          if (item.carOwnerId == this.selectUsers[0].id) {
            item.flag = true;
          } else {
            item.flag = false;
          }
        });
      }
    },
    changeUserPageSize(v) {
      // 第几页
      this.searchUserForm.pageSize = v;
      this.getUserDataList();
    },
    getUserDataList() {
      this.userLoading = true;
      this.searchUserForm.entrustedId = this.getDriverID;
      getdriverPage(this.searchUserForm).then((res) => {
        this.userLoading = false;
        this.userData = res.result.records;
        this.totalUser = res.result.total;
        this.switchss();
      });
    },
    handleSearchUser() {
      this.searchUserForm.pageNumber = 1;
      this.searchUserForm.pageSize = 10;
      this.getUserDataList();
    },
    handleResetUser() {
      this.$refs.searchUserForm.resetFields();
      this.searchUserForm.pageNumber = 1;
      this.searchUserForm.pageSize = 10;
      this.searchUserForm.departmentId = "";
      // 重新加载数据
      this.getUserDataList();
    },
    //驾驶员详情
    BidderdDiver(row) {
      this.BidderdUserId = row.driverId;
      this.driverModalue = true;
    },

    //选中的驾驶员
    SelectDriver(row) {
      this.BidderdUserId = row.id;
      this.driverModalue = true;
    },
    // 驾驶员详情关闭
    DriverDetaEnd(val) {
      this.driverModalue = val;
      this.BidderdUserId = "";
    },
    //车辆详细信息关闭
    VehicleDetailsEnd(val) {
      this.VehicleDetailsModalue = val;
      this.VehicleDetailsId = "";
    },
    // 查看车辆详细
    LookVehicleInfo(row) {
      this.VehicleDetailsModalue = true;
      this.VehicleDetailsId = row.vehicleId;
    },
    setData(v) {
      this.selectUsers = v;
      this.$emit("on-change", this.selectUsers);
    },
    chooseUser(v) {
      let arr = [];
      // 去重
      let that = this;
      let flag = true;
      this.selectUsers.forEach((e) => {
        if (v.carOwnerId == e.id) {
          that.$Message.warning("已经添加过啦，请勿重复选择");
          flag = false;
        }
      });
      if (flag) {
        let u = {
          id: v.carOwnerId,
          name: v.name,
          phone: v.phone,
          vehicleNum: v.vehicleNum,
        };
        arr.push(u);
        this.$Message.success(`添加用户 ${v.name} 成功`);
      } else {
        let u = {
          id: v.carOwnerId,
          name: v.name,
          phone: v.phone,
          vehicleNum: v.vehicleNum,
          flag: true,
        };
        arr.push(u);
      }
      this.selectUsers = arr;
      this.$emit("on-change", this.selectUsers);
    },
    clearSelectData() {
      this.selectUsers = [];
      this.$emit("on-change", this.selectUsers);
      this.userData.forEach((item) => {
        item.flag = false;
      });
      this.getUserDataList();
    },
    handleCancelUser(e, id) {
      // 删除所选用户
      this.selectUsers = this.selectUsers.filter((e) => {
        return e.id != id;
      });
      this.$emit("on-change", this.selectUsers);
      this.$Message.success("删除所选用户成功");
    },
  },
  mounted() {
    this.getUserDataList();
    this.columnsDriver = this.userColumns;
  },
};
</script>
<style lang="less">
.user-choose {
  .clear {
    font-size: 12px;
    margin-left: 15px;
    color: #40a9ff;
    cursor: pointer;
  }
  .collapse {
    font-size: 12px;
    margin-top: 15px;
    width: 500px;
  }
  .select-count {
    font-weight: 600;
    color: #40a9ff;
  }
}
.Modal-driverS {
  .ivu-modal-wrap,
  .ivu-modal-mask {
    z-index: 1900 !important;
  }
}
</style>